<template>
  <div>
    <!--gutter表示间距-->
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{consumerCount}}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{songCount}}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{singerCount}}</div>
              <div>歌手数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{songListCount}}</div>
              <div>歌单数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <!--span:共24份，6表示占4分之1-->
      <el-col :span="12">
          <h3 class="mgb20">用户性别比例</h3>
          <div style="background-color: white">
            <ve-pie :data="consumerSex" :theme="options"></ve-pie>
          </div>
      </el-col>
      <el-col :span="12">
          <h3 class="mgb20">歌曲类型分布</h3>
          <div style="background-color: white">
            <ve-histogram :data="songStyle"></ve-histogram>
          </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">歌手性别比例</h3>
        <div style="background-color: white">
          <ve-histogram :data="singerSex"></ve-histogram>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">歌手国籍分布</h3>
        <div style="background-color: white">
          <ve-histogram :data="country"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getAllConsumer,getAllSong,getAllSinger,getAllSongList} from "../api/index";
  export default {
    name: "InfoPage",
    data(){
      return{
        consumerCount:0, //用户总数
        songCount:0, //歌曲总数
        singerCount:0, //歌手数量
        songListCount:0, //歌单数量
        consumer:[], //所有用户
        singer:[],//所有歌手
        songStyle:{ //歌曲风格
          columns:['风格','总数'],
          rows:[
            {'风格':'华语','总数':0},
            {'风格':'摇滚','总数':0},
            {'风格':'韩流','总数':0},
            {'风格':'舒适','总数':0},
            {'风格':'金属','总数':0},
          ],
        },
        consumerSex:{
          columns:['性别','总数'],
          rows:[
            {'性别':'男','总数':0},
            {'性别':'女','总数':0},
          ],
        },
        singerSex:{
          columns:['性别','总数'],
          rows:[
            {'性别':'女','总数':0},
            {'性别':'男','总数':0},
            {'性别':'组合','总数':0},
            {'性别':'不明','总数':0},
          ],
        },
        country:{
          columns:['国籍','总数'],
          rows:[
            {'国籍':'中国','总数':0},
            {'国籍':'美国','总数':0},
            {'国籍':'日本','总数':0},
            {'国籍':'印度','总数':0},
            {'国籍':'英国','总数':0},
          ],
        },
        options:{
          color:['#87cefa','#ffc0cb']
        }
      }
    },
    mounted(){
      this.getConsumer()
      this.getSong()
      this.getSongList()
      this.getSinger()
    },
    methods:{
      getConsumer(){
        getAllConsumer().then(res =>{
          this.consumer = res
          this.consumerCount = res.length
          this.consumerSex.rows[0]['总数']= this.setSex(1,this.consumer)
          this.consumerSex.rows[1]['总数']= this.setSex(0,this.consumer)
        })
      },
      setSex(sex,val){//根据性别获取用户数
         let count =0;
         for(let item of val){
           if(sex ==item.sex){
             count++
           }
         }
         return count
      },
      getSong(){
        getAllSong().then(res =>{
          this.songCount = res.length
        })
      },
      getSongList(){
        getAllSongList().then(res =>{
          this.songListCount = res.length;
          for (let item of res) {
            this.getByStyle(item.style)
          }
        })
      },
      getByStyle(style){//根据歌曲风格获取数量
        for(let item of this.songStyle.rows){
          if (style.includes(item['风格'])){
            item['总数']++
          }
        }
      },
      getByCountry(location){
        for(let item of this.country.rows){
          if (location.includes(item['国籍'])){
            item['总数']++
          }
        }
      },
      getSinger(){
        getAllSinger().then(res =>{
          this.singer = res
          this.singerCount = res.length
          this.singerSex.rows[0]['总数']= this.setSex(0,this.singer)
          this.singerSex.rows[1]['总数']= this.setSex(1,this.singer)
          this.singerSex.rows[2]['总数']= this.setSex(2,this.singer)
          this.singerSex.rows[3]['总数']= this.setSex(3,this.singer)
          for(let item of this.singer){
            this.getByCountry(item.location)
          }
        })
      },
    }
  }
</script>

<style scoped>
  .grid-content{
    display: flex;
    align-items: center;
  /*内容居中 */
    height: 50px;
  }
  .grid-cont-center{
    flex:1;
    /*因为父元素display设置为felx，所以子元素的div想要自动换行，就得加这个属性*/
    text-align: center;
    /*子元素左右居中*/
    font-size:14px;
    color: darkgray;
  }
  .grid-num{
    font-weight: bold;
    font-size: 30px;
  }
</style>
